import React, { PureComponent } from 'react';
import { Form, Checkbox, notification } from 'antd';
import {bus} from "../../utils/bus"
import { connect } from 'dva';
class pileCrossSection extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            extra:{code:"CAP"}
        }
        this.onSelect1 = this.onSelect1.bind(this)
        this.onSelect2 = this.onSelect2.bind(this)
        this.onChange1 = this.onChange1.bind(this)
        this.onChange2 = this.onChange2.bind(this)
        this.showCrossSection=this.showCrossSection.bind(this)
        this.setFormData=this.setFormData.bind(this)
        this.clearFormData=this.clearFormData.bind(this)
    }
    showCrossSection(e){
        const {extra,detail}=this.state
        const {crossSectionTemplate,modalContext}=this.props
        e.preventDefault();
          if (modalContext) {
           modalContext.updateModal({
                visible: true,
                title: "截面库",
                event: { code: 'crossSection' },
                extra:{...extra,detail,crossSectionTemplate}
            });
        }
    }
    clearFormData(){
        const list = document.querySelectorAll(".input")
        if(list&&list.length){
            const len=list.length;
            for (let i = 0; i < len; i++) {
                let item = list[i];
                if(!item.defaultValue){
                    item.value=""
                }
               
            }
        }
    }
    setFormData(data){
        const list = document.querySelectorAll(".input")
        if(list&&list.length){
            const len=list.length;
            for (let i = 0; i < len; i++) {
                let item = list[i];
                const key=item.dataset.key;
                if(data[key]){
                    if(item.dataset.handler){
                        if(String(data[key]).includes("*")){
                            item.value=data[key].split("*").map(item=>item/10).join("*")
                        }else{
                            item.value=eval(data[key]+item.dataset.handler.replace(/\*/g,"/"))
                        }
                        
                    }else{
                        item.value=data[key]
                    }
                    
                }
            }
        }
        this.setState({
            detail:data
        })
    }
    onSelect1(e) {
        const list = document.querySelectorAll("select")
        const len = list.length;
        for (let i = 0; i < len; i++) {
            let item = list[i];

            const key = item.dataset.key
            if (key == "reinforcementNetWDiameter") {
                item.value = e.target.value
            }
        }
    }
    onSelect2(e) {
        const list = document.querySelectorAll("select")
        const len = list.length;
        for (let i = 0; i < len; i++) {
            let item = list[i];
            const key = item.dataset.key
            if (key == "reinforcementNetWSpacing") {
                item.value = e.target.value
            }
        }
    }
    onChange1(e) {
        this.setState({
            disabled1: !e.target.checked
        })
    }
    onChange2(e) {
        this.setState({
            disabled2: !e.target.checked
        })
    }
    componentWillUnmount(){
        bus.off("crossSectionFinish")
    }
    async componentDidMount() {
        const { dictlist,onLoaded ,ironList} = this.props;
        if(onLoaded){
           onLoaded(this)
        }
        const {extra}=this.state;
        bus.on("crossSectionFinish",res=>{
            if(res){
                this.setState({
                    extra:{
                        ...extra,
                        ...res
                    }
                })
                const list = document.querySelectorAll("#pileCrossSection .input")
                const len=list.length;
                for (const key in res) {
                    if (Object.hasOwnProperty.call(res, key)) {
                        const item = res[key];
                        for (let j = 0; j < len; j++) {
                            let item2 = list[j];
                            if(item2.dataset.key==key){
                                item2.value=item
                            }
                        }
                    }
                }
            }
        })
       
        let res = await ironList()
        let arr = []
        if (res && res.length) {
            const len = res.length;
            for (let i = 0; i < len; i++) {
                const item = res[i];
                arr.push(item.diameter)
            }
        }
        this.setState({
            irons: arr,
            reinforcementGrade: dictlist.filter(item => item.dictType == "reinforcement_grade"),
            reinforcementDiameter: dictlist.filter(item => item.dictType == "iron_list"),
            concreteNo: dictlist.filter(item => item.dictType == "concrete_no"),
            layoutType: dictlist.filter(item => item.dictType == "layout_type"),
            erectionHorizontalReinforcementSpacing: dictlist.filter(item => item.dictType == "erection_horizontal_reinforcement_spacing"),
            connectorSpacing: dictlist.filter(item => item.dictType == "connector_spacing"),
        })
    }
    render() {
        const {
            reinforcementGrade,connectorSpacing, concreteNo,erectionHorizontalReinforcementSpacing,
            disabled1, disabled2, irons,layoutType } = this.state
            const {mode}=this.props;
        return (
            <form>
                <table id="pileCrossSection" className="hover tf">
                    <tbody>
                        <tr>
                            <td className="bold required" colSpan="2">总体配置项</td>
                        </tr>
                        <tr>
                            <td >截面库</td>
                            <td onClick={this.showCrossSection} className="nopadd rightIcon"><input defaultValue="" data-key="crossSection" data-name="截面库" className="input" type="text" /></td>
                        </tr>
                        <input hidden data-handler="*10" defaultValue="700" data-key="length" data-name="承台顺桥向长度" className="input" />
                        <input hidden data-handler="*10" defaultValue="800" data-key="width" data-name="承台横桥向宽度" className="input"  />
                        <input hidden data-handler="*10" defaultValue="300" data-key="height" data-name="承台高度" className="input" />
                        <tr>
                            <td >混凝土标号</td>
                            <td className="nopadd"> <select data-key="concreteNo" className="input" data-name="混凝土标号" >
                                {
                                    concreteNo && concreteNo.length ? concreteNo.map((item, index) => {
                                        return <option key={"concreteNo"+index} value={item.dictLabel}>{item.dictLabel}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td >混凝土保护层(cm)</td>
                            <td><input data-key="concreteProtectLayer" data-handler="*10" defaultValue="6" data-name="混凝土保护层" className="input" type="number" /></td>
                        </tr>
                        <tr>
                            <td >钢筋等级</td>
                            <td className="nopadd">
                                <select data-key="reinforcementGrade" className="input" data-name="钢筋等级" >
                                    {
                                        reinforcementGrade && reinforcementGrade.length ? reinforcementGrade.map((item, index) => {
                                            return <option  key={"reinforcementGrade"+index} value={item.dictLabel}>{item.dictLabel}</option>
                                        }) : undefined
                                    }

                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td >桩基伸入深度(cm)</td>
                            <td className="nopadd"><input data-handler="*10" defaultValue="10" data-key="pilePenetrationDepth" data-name="桩基伸入深度" className="input" type="number" /></td>
                        </tr>
                        <tr>
                            <td >结构类型</td>
                            <td><input data-key="structureType" defaultValue="PCD1" data-name="结构类型" className="input" type="text" /></td>
                        </tr>
                        <tr>
                            <td >结构个数</td>
                            <td className="nopadd"><input defaultValue="4" data-key="structureNumber" data-name="结构个数" className="input" type="number" /></td>
                        </tr>
                        <tr>
                            <td >连接器间距(cm)</td>
                            <td className="nopadd"><select data-handler="*10" data-key="connectorSpacing" className="input" data-name="连接器间距" >
                                {
                                    connectorSpacing && connectorSpacing.length ? connectorSpacing.map((item, index) => {
                                        return <option key={'connectorSpacing'+index} value={item.dictLabel/10}>{item.dictLabel/10}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td className="bold required" colSpan="2">顶层钢筋</td>
                        </tr>

                        <tr>
                            <td >横向直径(mm)</td>
                            <td className="nopadd"><select data-key="topLReinforcementDiameter" className="input" data-name="顶层钢筋横向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option  key={"topLReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td >横向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="topLReinforcementSpacing" defaultValue="10" data-name="顶层钢筋横向间距" className="input" type="number" /></td>
                        </tr>
        
                        <tr>
                            <td >纵向直径(mm)</td>
                            <td className="nopadd"><select data-key="topWReinforcementDiameter" className="input" data-name="顶层钢筋纵向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"topWReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >纵向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="topWReinforcementSpacing" defaultValue="10" data-name="顶层钢筋纵向间距" className="input" type="number" /></td>
                        </tr>
           
                        <tr>
                            <td >层数</td>
                            <td className="nopadd"><input data-key="topReinforcementLayersNumber" defaultValue="1" data-name="顶层钢筋层数" className="input" type="number" /></td>
                        </tr>

                        <tr>
                            <td className="bold required" colSpan="2">底层钢筋</td>
                        </tr>
                        <tr>
                            <td >横向直径(mm)</td>
                            <td className="nopadd"><select data-key="bottomLReinforcementDiameter" className="input" data-name="底层钢筋横向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"bottomLReinforcementDiameter"+index}  selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >横向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="bottomLReinforcementSpacing" defaultValue="10" data-name="底层钢筋横向间距" className="input" type="number" /></td>
                        </tr>
        
                        <tr>
                            <td >纵向直径(mm)</td>
                            <td className="nopadd"><select data-key="bottomWReinforcementDiameter" className="input" data-name="底层钢筋纵向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"bottomWReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >纵向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="bottomWReinforcementSpacing" defaultValue="10" data-name="底层钢筋纵向间距" className="input" type="number" /></td>
                        </tr>
            
                        <tr>
                            <td >层数</td>
                            <td className="nopadd"><input data-key="bottomReinforcementLayersNumber" defaultValue="1" data-name="底层钢筋层数" className="input" type="number" /></td>
                        </tr>

                        <tr>
                            <td className="bold required" colSpan="2">侧面钢筋</td>
                        </tr>

    
                        <tr>
                            <td >竖向直径(mm)</td>
                            <td className="nopadd"><select data-key="aroundHReinforcementDiameter" className="input" data-name="侧面钢筋竖向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"aroundHReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >竖向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="aroundHReinforcementSpacing" defaultValue="10" data-name="侧面钢筋竖向间距" className="input" type="number" /></td>
                        </tr>
                        <tr>
                            <td >横向直径(mm)</td>
                            <td className="nopadd"><select data-key="aroundLReinforcementDiameter" className="input" data-name="侧面钢筋横向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"aroundLReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td >纵向直径(mm)</td>
                            <td className="nopadd"><select data-key="aroundWReinforcementDiameter" className="input" data-name="侧面钢筋纵向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"aroundWReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" data-key="aroundReinforcementSpacing" defaultValue="10" data-name="侧面钢筋纵向间距" className="input" type="number" /></td>
                        </tr>
                
                        <tr >
                            <td className="bold required" colSpan="2">架立钢筋</td>
                        </tr>

                        <tr>
                            <td >直径(mm)</td>
                            <td className="nopadd"><select data-key="erectionReinforcementDiameter" className="input" data-name="架立钢筋直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"erectionReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td >间距(cm)</td>
                            <td className="nopadd"><select data-handler="*10" data-key="erectionReinforcementSpacing" className="input" data-name="架立钢筋间距" >
                                {
                                    erectionHorizontalReinforcementSpacing && erectionHorizontalReinforcementSpacing.length ? erectionHorizontalReinforcementSpacing.map((item, index) => {
                                        return <option  key={"erectionHorizontalReinforcementSpacing"+index} value={item.dictLabel.split("*").map(item=>item/10).join("*")}>{item.dictLabel.split("*").map(item=>item/10).join("*")}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td >布置方式</td>
                            <td className="nopadd"><select data-key="layoutType" className="input" data-name="架立钢筋间距" >
                                {
                                    layoutType && layoutType.length ? layoutType.map((item, index) => {
                                        return <option  key={"layoutType"+index} value={item.dictLabel}>{item.dictLabel}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                     
                        <tr >
                            <td className="bold " colSpan="2"><Checkbox checked={!disabled1} onChange={this.onChange1}>水平支撑钢筋(可选)</Checkbox></td>
                        </tr>
                        <tr>
                            <td>间距(cm)</td>
                            <td className="nopadd"><select data-handler="*10" disabled={disabled1} data-key="horizontalSupportReinforcementSpacing" className="input" data-name="水平支撑钢筋横向间距" >
                                {
                                    erectionHorizontalReinforcementSpacing && erectionHorizontalReinforcementSpacing.length ? erectionHorizontalReinforcementSpacing.map((item, index) => {
                                        return <option key={"horizontalSupportReinforcementSpacing"+index} value={item.dictLabel.split("*").map(item=>item/10).join("*")}>{item.dictLabel.split("*").map(item=>item/10).join("*")}</option>
                                    }) : undefined
                                }

                            </select></td>


                        </tr>

                        <tr>
                            <td>横向直径(mm)</td>
                            <td className="nopadd"><select disabled={disabled1} data-key="horizontalSupportLReinforcementDiameter" className="input" data-name="水平支撑钢筋横向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"horizontalSupportLReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td>纵向直径(mm)</td>
                            <td className="nopadd"><select disabled={disabled1} data-key="horizontalSupportWReinforcementDiameter" className="input" data-name="水平支撑钢筋纵向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option  key={"horizontalSupportWReinforcementDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td>层数</td>
                            <td className="nopadd"><input defaultValue="1" disabled={disabled1} data-name="层数" data-key="horizontalSupportReinforcementLayersNumber" className="input" type="number" /></td>
                        </tr>

                        <tr >
                            <td className="bold" colSpan="2"><Checkbox checked={!disabled2} onChange={this.onChange2}>钢筋网(可选)</Checkbox></td>
                        </tr>

                        <tr>
                            <td>横向直径(mm)</td>
                            <td className="nopadd"><select onChange={this.onSelect1} disabled={disabled2} data-key="reinforcementNetLDiameter" className="input" data-name="钢筋网横向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option  key={"reinforcementNetLDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>

                        <tr>
                            <td>横向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" onChange={this.onSelect2} disabled={disabled2} data-key="reinforcementNetLSpacing" defaultValue="10" data-name="钢筋网横向间距" className="input" type="number" /></td>
                        </tr>
   
                        <tr>
                            <td>纵向直径(mm)</td>
                            <td className="nopadd"><select disabled={disabled2} data-key="reinforcementNetWDiameter" className="input" data-name="钢筋网纵向直径" >
                                {
                                    irons && irons.length ? irons.map((item, index) => {
                                        return <option key={"reinforcementNetWDiameter"+index} selected={item == 20} value={item}>{item}</option>
                                    }) : undefined
                                }

                            </select></td>
                        </tr>
                        <tr>
                            <td>纵向间距(cm)</td>
                            <td className="nopadd"><input data-handler="*10" onChange={this.onSelect2} disabled={disabled2} data-key="reinforcementNetWSpacing" defaultValue="10" data-name="钢筋网纵向间距" className="input" type="number" /></td>
                        </tr>
        
                    </tbody>
                </table>
                {
                    mode=="edit"?<input className="input" data-key="id" hidden type="text"/>:undefined
                }
            </form>
        )
    }
}
export default connect(
    ({ dict: { dictlist }, }) => ({ dictlist }),
    dispatch => ({
        ironList: (values) => dispatch({
            type: 'renforce/ironList',
            payload: values
        })
    })
)(Form.create('pileCrossSection', {

})(pileCrossSection));